<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>Hello APP</title>
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/style.css" />
    <style>
        body {
            background: #f2f2f2
        }

        .order-item {
            padding: 0 .6rem;
            margin: .6rem;
        }

        .btns {
            height: 2.8rem;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: flex-end;
        }

        .btns button {
            height: 1.6rem;
            padding: 0 .6rem;
            line-height: 1.6rem;
            border: 1px solid #CCCCCC;
            border-radius: 1rem;
            margin-left: .6rem;
            background: #fff;
        }
    </style>
</head>

<body>
    <div id="app">
        <section class="font-13 text-color-3">
            <div class="order-item white-bg-radius">
                <div class="height-44 flex-justify-between">
                    <div class="flex-align-center">
                        <img class='img-16' src="../../image/merchant/sj.png" alt="" style="margin-right:0.3rem">
                        <span class="font-semibold">2019-10-10</span>
                    </div>
                    <div class="font-12 red-text">待收货</div>
                </div>
                <div class="flex" style="position: relative;padding:0.6rem 0" v-for='(item,index) in goodsArr'>
                    <img src="../../image/index/logo1.png" alt="" style="height:4.3rem;width:4.3rem;margin-right:0.6rem">
                    <div class="">
                        <div class="font-semibold">
                            {{item.name}}
                        </div>
                        <div class="text-color-9  font-10" style="margin-top:0.3rem">
                            {{item.specifications}}
                        </div>
                        <div class="text-color-9" style="position: absolute;bottom:0.6rem">
                            ×{{item.num}}
                        </div>
                    </div>
                </div>

                <div class="height-38" style="text-align:right">
                    数量合计<span class="font-15">{{goodsNum}}</span>
                </div>
            </div>
        </section>
        <section style="margin:0.6rem">
            <div class="white-bg-radius text-color-3 font-13 " style="padding:0 0.6rem">
                <div class="font-semibold height-44 font-14">
                    发货单信息
                </div>
                <div class="height-38 flex-center-between">
                    <div>
                        发货备注
                    </div>
                    <div>
                        {{invoiceInfo.remark}}
                    </div>
                </div>
                <div class="height-38 flex-center-between">
                    <div>发货人</div>
                    <div>{{invoiceInfo.name}}</div>
                </div>
                <div class="height-38 flex-center-between">
                    <div>发货时间</div>
                    <div>{{invoiceInfo.createTime}}</div>
                </div>
            </div>
        </section>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript " src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js "></script>


<script type="text/javascript ">
    var vm = new Vue({
        el: '#app',
        data: {
            goodsArr: [{
                name: '轻食香芒牛肉沙拉瘦身减肥蔬菜三百卡轻食香芒牛肉沙拉瘦身',
                specifications: '去冰/五分甜',
                num: 3
            }, {
                name: '轻食香芒牛肉沙拉瘦身减肥蔬菜三百卡轻食香芒牛肉沙拉瘦身',
                specifications: '去冰/五分甜',
                num: 10
            }],
            goodsNum: 0,
            invoiceInfo: {
                remark: '明天送达',
                name: '张三',
                createTime: 1230999938000
            }
        },
        created() {
            this.getGoodsNum()
        },
        methods: {
            getGoodsNum: function() {
                let goodsArr = this.goodsArr;
                let num = 0;
                for (var i = 0; i < goodsArr.length; i++) {
                    num += goodsArr[i].num
                }
                this.goodsNum = num;
                let time = this.invoiceInfo.createTime;
                let createTime = this.formatDate(time);
                console.log(createTime)
                this.invoiceInfo.createTime = createTime;
            },
            toOrderDetail: function() {
                api.openFrame({
                    name: 'order-detail_win',
                    url: './order-detail_win.html',
                    bounces: true,
                    rect: {
                        x: 0,
                        y: 0,
                        w: 'auto',
                        h: 'auto'
                    }
                })
            },
            // 时间戳转为普通日期格式(时间戳格式必须被整型)
            formatDate: function(time) {
                var mydate = new Date(time);
                var year = mydate.getFullYear();
                var month = mydate.getMonth() + 1;
                month = month < 10 ? ("0" + month) : month;
                var date = mydate.getDate();
                date = date < 10 ? ("0" + date) : date;
                var hour = mydate.getHours();
                hour = hour < 10 ? ("0" + hour) : hour;
                var minute = mydate.getMinutes();
                minute = minute < 10 ? ("0" + minute) : minute;
                var second = mydate.getSeconds();
                second = second < 10 ? ("0" + second) : second;
                return  year + "-" + month + "-" + date + " " + hour + ":" + minute + ":" + second;
            }
        }

    });

    apiready = function() {

    }
</script>


</html>
